<template>
	<view class="container page-evaluate">
		<view class="module-product">
			<view class="product-body">
				<view
					v-for="(item, index) in resData.productList"
					:key="index"
					class="item-content"
				>
					<productInfo
						:title="item.title"
						:tips="item.tips"
						:count="item.count"
						:price="item.price"
						style="width: 100%;"
					></productInfo>
				</view>
			</view>
		</view>
		<view class="module-evaluate">
			<view class="module-header">商品评价</view>
			<view class="module-body">
				<view class="item">
					<span class="item-addon">服务态度</span>
					<uniRate
						:value="rate.first"
						active-color="#1ABC9C"
						color="#ddd"
						size="22"
						margin="10"
						@change="handleRateFirst"
					></uniRate>
					<span class="point">{{ rate.first }}</span>
				</view>
				<view class="item">
					<span class="item-addon">商品评分</span>
					<uniRate
						:value="rate.second"
						active-color="#1ABC9C"
						color="#ddd"
						size="22"
						margin="10"
						@change="handleRateSecond"
					></uniRate>
					<span class="point">{{ rate.second }}</span>
				</view>
				<view class="item">
					<span class="item-addon">物流评分</span>
					<uniRate
						:value="rate.third"
						active-color="#1ABC9C"
						color="#ddd"
						size="22"
						margin="10"
						@change="handleRateThird"
					></uniRate>
					<span class="point">{{ rate.third }}</span>
				</view>
			</view>
		</view>
		<view class="module-button">
			<button class="btn" type="main">提交</button>
		</view>
	</view>
</template>

<script>
import uniRate from '@/components/uni-rate/uni-rate.vue';
import productInfo from '@/pages/components/product-info/product-info.vue';
export default {
	components: {
		uniRate,
		productInfo,
	},
	data() {
		return {
			rate: {
				first: '5',
				second: '5',
				third: '5',
			},
			resData: {
				shop: '微企生鲜集团',
				status: '待支付',
				totalPrice: '240',
				sn: '5020200308',
				productList: [
					{
						title: '新鲜好吃的三文鱼',
						tips: '日本进口，400g',
						price: 120,
						count: 2,
					},
					{
						title: '新鲜好吃的三文鱼',
						tips: '日本进口，400g',
						price: 120,
						count: 2,
					},
				],
			},
		};
	},
	onLoad(options) {},
	methods: {
		handleRateFirst: function (e) {
			this.rate.first = e.value;
		},
		handleRateSecond: function (e) {
			this.rate.second = e.value;
		},
		handleRateThird: function (e) {
			this.rate.third = e.value;
		},
	},
};
</script>
<style lang="scss">
.page-evaluate {
	.module-header {
		background: #f5f5f5;
		padding: $uni-spacing-base $uni-spacing-base;
		border-bottom: 1px solid #eee;
	}
	.module-product {
		background: #fff;

		.product-body {
			padding: $uni-spacing-sm $uni-spacing-lg;
			border-bottom: 1px solid #eee;
		}
		.item-content {
			display: flex;
			padding: $uni-spacing-base 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: none;
			}
		}
	}
}
.module-evaluate {
	background: #fff;
	margin: 0 0 24rpx;
	.module-body {
		padding: 32rpx 24rpx;
	}
	.point {
		color: $uni-text-price;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 46rpx;
	}

	.point {
		margin-left: 28rpx;
		font-size: 38rpx;
	}

	.item {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		margin: 0 0 32rpx;
	}

	.item-addon {
		margin-right: 28rpx;
	}
}
.module-button {
	padding: 0 32rpx;
	.btn {
		font-size: 36rpx;
	}
}
</style>
